<template>
  <div>
    <el-scrollbar :height="isTagsview ? `calc(100vh - 154px)` : `calc(100vh - 120px)`">
			<zh-space>
				<zh-card title="">
          <zh-form ref="queryFrom" :model="state.queryParam">
						<zh-form-input prop="funcCode" label="功能编号" placeholder="可输入功能编号查询" v-model="state.queryParam.funcCode"></zh-form-input>
						<zh-form-input prop="funcTitle" label="功能名称" placeholder="可模糊搜索查询" v-model="state.queryParam.funcTitle"></zh-form-input>
						<template v-if="state.advanced">
              <zh-form-select
								prop="funcType"
								label="功能类型"
								placeholder="单选"
								:options="state.dictData.funcType"
								v-model="state.queryParam.funcType"
							></zh-form-select>
              <zh-form-select
								prop="apiType"
								label="接口类型"
								placeholder="单选"
								:options="state.dictData.apiType"
								v-model="state.queryParam.apiType"
							></zh-form-select>
              <zh-form-select
								prop="funcSourceType"
								label="功能来源类型"
								placeholder="单选"
								:options="state.dictData.funcSourceType"
								v-model="state.queryParam.funcSourceType"
							></zh-form-select>
              <zh-form-select
								prop="auType"
								label="流程节点类型"
								placeholder="单选"
								:options="state.dictData.auType"
								v-model="state.queryParam.auType"
							></zh-form-select>
              <zh-form-input prop="serviceName" label="服务名" placeholder="" v-model="state.queryParam.serviceName"></zh-form-input>
              <zh-form-input prop="funcSourceName" label="功能来源名称" placeholder="" v-model="state.queryParam.funcSourceName"></zh-form-input>
              <zh-form-select placeholder="请搜索，单选"
                prop="orgId"
                funcCode="org0001"
                label="建设单位"
                searchField="orgName"
                :fieldNames="{
                  label: 'orgName',
                  value: 'orgId',
                }"
                :lazy="true"
                v-model="state.queryParam.orgId">
              </zh-form-select>
              <zh-form-select placeholder="请搜索，单选"
                prop="devOrgId"
                funcCode="org0001"
                label="开发单位"
                searchField="orgName"
                :fieldNames="{
                  label: 'orgName',
                  value: 'orgId',
                }"
                :lazy="true"
                v-model="state.queryParam.devOrgId">
              </zh-form-select>
              <zh-form-select
                prop="appId"
                :lazy="true"
                label="所属应用"
                v-model="state.queryParam.appId"
                :fieldNames="{ label: 'appName', value: 'appId' }"
                funcCode="application0012"
                searchField="appName"
              ></zh-form-select>
            </template>
            <zh-form-query v-model="state.advanced" :form-ref="queryFrom" :table-ref="functionListTable" ></zh-form-query>
					</zh-form>
				</zh-card>
        <zh-table ref="functionListTable" :rowConfig="{keyField:'funcId'}"  title="已关联功能列表" :funcCode="state.funcCode" :columns="state.tableColumn">
          <template #status_default="{ row }"><zh-badge :status="statusMap[row.funcStatus].status" :text="statusMap[row.funcStatus].text" /></template>
        </zh-table>
      </zh-space>
		</el-scrollbar>
  </div>
</template>
<script lang="ts" setup name="addRouterFunctionModule">
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	routerId: {
		type: String,
	}
});
const { isTagsview } = storeToRefs($store.theme);
//------------------定义子组件---------------------------
const queryFrom = ref();
const functionListTable = ref();

//------------------内部变量定义-------------------------
const state = reactive({
	queryParam: { routerId: '' },
  advanced:false,
  dictData:{},
  funcCode:'router0027',
  tableColumn:[
    { type: 'checkbox', width: 50, fixed: 'left' },
    {type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号'},
    {field: 'funcId', title: '方法Id', fixed: 'left', visible: false, align: 'center', width: 150},
    {field: 'funcCode', title: '功能编号', align: 'center', fixed: 'left', width: 150},
    {field: 'funcTitle', title: '功能名称', align: 'center', fixed: 'left', width: 150},
    {field: 'funcTypeName', title: '功能类型', align: 'center',  width: 150},
    {field: 'apiTypeName', title: '接口类型', align: 'center',  width: 150},
    {
      field: 'funcStatus',
      title: '状态',
      align: 'center',
      editRender: {},
      slots: {
        // 使用插槽模板渲染
        default: 'status_default',
      },
      width: 120,
    },
    {field: 'funcDesc', title: '功能描述', align: 'center',  width: 300},
    {field: 'funcSourceTypeName', title: '功能来源类型', align: 'center',  width: 120},
    {field: 'serviceName', title: '服务名', align: 'center',  width: 200},
    {field: 'funcSourceName', title: '服务名称', align: 'center',  width: 120},
    {field: 'appName', title: '所属应用', align: 'center',  width: 200},
    {field: 'orgName', title: '建设单位', align: 'center',  width: 200},
    {field: 'devOrgName', title: '开发公司', align: 'center',  width: 200},
    {field: 'classPath', title: '类路径', align: 'center',  width: 200},
    {field: 'method', title: '请求方法', align: 'center',  width: 200},
    {field: 'api', title: '请求URL', align: 'center',  width: 200},
  ],
});
const statusMap = {
	0: {
		status: 'error',
		text: '禁用',
	},
	1: {
		status: 'processing',
		text: '启用',
	},
};
//------------------定义调用方法-------------------------
const emit = defineEmits(['update:modelValue']);
const onFuncQuery = () => {
  if(!props.routerId){
    return
  }
	functionListTable.value.query(state.queryParam);
};
//获取勾选的功能信息
function getCheckedFuncIds() {
	const funcS = functionListTable.value.getAllCheckboxRecords();
	if (funcS) {
		if (funcS.length <= 0) {
			$messageBox.warning('请先勾选需要关联的功能', '提示');
			return;
		}
	} else {
		$messageBox.warning('请先勾选需要关联的功能', '提示');
		return;
	}
	const funcIds: string[] = [];
	funcS.forEach((item) => {
		funcIds.push(item.funcId);
	});
	return funcIds;
}
//--------------------监听变动数据-----------------------------
watch(
	() => props.routerId,
	(id) => {
		if (id) {
			state.queryParam.routerId = id;
      onFuncQuery();
		}else{
      //清空表格
			functionListTable.value.setData([]);
    }
	}
);
//------------------初始化------------------------------
onMounted(()=>{
  state.queryParam.routerId = props.routerId;
  const params = {
    dictFields: 'funcType,funcSourceType,apiType,auType',
  };
  $api.common.getBatchDict.post(params).then((res) => {
    state.dictData = res.result;
  });
})
//------------设置给父组件调用的数据/方法(组件)-----------
defineExpose({
	onFuncQuery,
  getCheckedFuncIds
});
</script>

<style lang="scss" scoped></style>
